<!-- 封装组件 -->
<template>
  <div>
    <el-table style="width: 100%" :style="`height:${config.tableHeight}rem;`" :max-height="config.tableHeight" border
      v-bind="$attrs" @row-click="rowClick" :stripe="config.isStripe" :show-summary="config.isShowSummary"
      @sort-change="sortChange" @selection-change="selectionChange">
      <el-table-column align="center" type="selection" width="55" v-if="config.isSelection" />
      <!-- <el-table-column
        align="center"
        type="index"
        label="序号"
        width="55"
        v-if="config.isIndex"
      /> -->
      <el-table-column align="center" v-for="(item, index) in tableHeader.filter((item) => !item.noShow)" :key="index"
        :prop="item.prop" :min-width="item.minWidth" :width="item.width" :label="item.label"
        :sortable="item.isSort ? 'custom' : false" show-overflow-tooltip v-bind="item.columnAttrs">
        <!-- 一级 v-slot="scope"-->
        <template v-slot="scope" @click.stop>
          <template v-if="item.type === 'customIndex'">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
          <template v-else-if="item.type === 'link'">
            <el-link type="primary" @click.stop="linkClick(scope.row, item.title)">{{
              scope.row[item.prop]
              }}</el-link>
          </template>
          <template v-else-if="item.type === 'button'">
            <el-button type="primary" size="small" h-22px line-height-22px pl-5px pr-5px @click.stop="linkClick(scope.row, item.title)">{{
              item.btnText + scope.row[item.btntag]
              }}</el-button>
          </template>
          <template v-else-if="item.type === 'tag'">
            <el-tag v-if="scope.row[item.prop]" :type="scope.row[item.prop] ? 'primary' : 'danger'"
              v-bind="item.controlAttrsFunc && item.controlAttrsFunc(scope.row)">{{ scope.row[item.prop] }}</el-tag>
            <template v-else> - </template>
          </template>
          <template v-else-if="item.type === 'price'">
            <span>{{ handleNum(Number(scope.row[item.prop])) }}</span>
          </template>
          <template v-else-if="item.type === 'priceLink'">
            <el-link type="primary" @click.stop="linkClick(scope.row, item.title)">{{
              handleNum(Number(scope.row[item.prop]))
              }}</el-link>
          </template>
          <template v-else-if="item.type === 'process'">
            <span @click.stop="linkClick(scope.row, item.title)">
              <el-progress :percentage="item.isRide
                  ? ((Number(scope.row[item.prop]) * 10) / 10) * 100
                  : (Number(scope.row[item.prop]) * 10) / 10
                " :text-inside="true" :stroke-width="13"></el-progress>
            </span>
          </template>
          <!-- 当0.07*100结果是7.000000000000001 -->
          <!-- 插槽 -->
          <slot v-else-if="item.type === 'slot'" :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
          <template v-else-if="!item.type && item.children">
            <el-space size="small" line-height-23px h-23px>
              <template v-for="(v, i) in item.children.filter(item => {
                let result = true;
                const attrs = item.controlAttrsFunc && item.controlAttrsFunc(scope.row);

                if (attrs) {
                  if (attrs.style?.display === 'none') {
                    result = false;
                  }
                }

                return result;
              })" :key="i">
                <!-- <template v-if="v.type === 'link'">
                              <el-link type="primary" @click.stop="linkClick(scope.row, v.title)">{{ scope.row[v.prop]
                              }}</el-link>
                          </template> -->
                <template v-if="v.type === 'button'">
                  <el-button type="primary" size="small" h-22px line-height-22px pl-5px pr-5px @click.stop="linkClick(scope.row, v.title)"
                    v-bind="v.controlAttrsFunc && v.controlAttrsFunc(scope.row)">{{
                      (v.controlAttrsFunc && v.controlAttrsFunc(scope.row))?.btnText ||
                      v.btnText
                    }}</el-button>
                </template>
              </template>
            </el-space>
          </template>
          <template v-else>
            <span>{{
              (scope.row[item.prop] === null ? "" : scope.row[item.prop]) + "" || "-"
              }}</span>
          </template>

          <!-- 二级 子项 -->
          <!-- <template v-for='(v, i) in item.children' :key='i'>
                        <el-table-column align='center' :prop="v.prop" :width="v.width"
                            :sortable="v.isSort ? 'custom' : false" show-overflow-tooltip>
                            <template v-slot="scope" @click.stop>
                                <template v-if="v.type === 'link'">
                                    <el-link type="primary" @click.stop="linkClick(scope.row, v.title)">{{ scope.row[v.prop]
                                    }}</el-link>
                                </template>
                                <template v-else-if="v.type === 'button'">
                                    <el-button  size='small' @click.stop="linkClick(scope.row, v.title)">{{
                                        v.btnText }}</el-button>
                                </template>
                                <template v-else-if="v.type === 'tag'">
                                    <el-tag :type="scope.row[v.prop] ? 'primary' : 'danger'">{{ scope.row[v.prop] ? '是' : '否'
                                    }}</el-tag>
                                </template>
                                <template v-else-if="v.type === 'price'">
                                    <span>{{ handleNum(Number(scope.row[v.prop])) }}</span>
                                </template>
                                <template v-else-if="v.type === 'priceLink'">
                                    <el-link type="primary" @click.stop="linkClick(scope.row, v.title)">
                                        {{ handleNum(Number(scope.row[v.prop])) }}
                                    </el-link>
                                </template>
                                <template v-else-if="v.type === 'process'">
                                    <span @click.stop="linkClick(scope.row, v.title)">
                                        <el-progress
                                            :percentage="v.isRide ? Number(scope.row[v.prop]) * 10 / 10 * 100 : Number(scope.row[v.prop]) * 10 / 10"
                                            :text-inside="true" :stroke-width="13"></el-progress>
                                    </span>
                                </template>
                                <template v-else>
                                    <span>{{ scope.row[v.prop] }}</span>
                                </template>
                            </template>
                        </el-table-column>
                    </template> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup name="elementTable">
const props = defineProps({
  config: {
    type: Object,
    default: () => { },
  },
  tableHeader: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
});

// 定义子组件向父组件传值/事件
const emit = defineEmits([
  "link-click",
  "selection-change",
  "row-click",
  "sort-change",
  "slot-click",
]);

const slotClick = (row) => {
  emit("slot-click", row);
};
const linkClick = (row, title) => {
  emit("link-click", row, title);
};
const selectionChange = (selection) => {
  emit("selection-change", selection);
};
const rowClick = (row) => {
  if (props.config.isRowClick) emit("row-click", row);
};
const sortChange = (value) => {
  if (value.order) emit("sort-change", value);
};
const handleNum = (num) => {
  //(1)保留两位小数
  var dot = String(num).indexOf(".");
  if (dot != -1) {
    var dotCnt = String(num).substring(dot + 1, num.length);
    if (dotCnt.length > 2) num = num.toFixed(2);
  }
  //(2)四舍五入取整数
  // num = Math.round(num)
  //三位隔开
  return String(num).replace(/\d+/, function (n) {
    return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
  });
};
</script>

<style scoped lang="scss">
:deep() {

  //底色透明
  .el-table {
    // background-color: transparent !important;
  }

  //表格标题样式
  .el-table th.el-table__cell {
    .cell {
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #fff;
    }

    background: var(--table-header-background);
    border-bottom: none !important;
  }

  .el-table__header {
    background-color: var(--el-color-primary);
    opacity: 0.8;
    //border-radius: 5px;
    height: 32px;
  }

  .el-table .el-table__cell {
    color: #333;
    border-bottom: rgba(24, 127, 255, 0.2) 1px solid;
    border-right: rgba(24, 127, 255, 0.2) 1px solid;
    // cursor: pointer;
    background-color: #fff;
  }

  // .el-button.is-link {
  //   color: #1ee7ff;
  // }

  //斑马纹深色样式
  .el-table tr {
    background: unset;
  }

  .el-table--border .el-table__inner-wrapper::after,
  .el-table--border::after,
  .el-table--border::before,
  .el-table__inner-wrapper::before {
    background: unset;
  }

  .el-table__footer-wrapper tfoot td.el-table__cell {
    background: transparent;
  }

  .el-table__border-left-patch {
    visibility: hidden;
  }
}
</style>
